<template>
  <el-card shadow="never" class="ticket-filter-bar">
    <el-form :inline="true" :model="localFilters" @submit.prevent>
      <el-form-item label="工单类型">
        <el-select v-model="localFilters.type" placeholder="全部类型" clearable style="width: 120px">
          <el-option label="全部类型" value="" />
          <el-option label="故障报修" value="bug" />
          <el-option label="功能建议" value="feature" />
          <el-option label="咨询问题" value="question" />
          <el-option label="投诉建议" value="complaint" />
        </el-select>
      </el-form-item>
      <el-form-item label="优先级">
        <el-select v-model="localFilters.priority" placeholder="全部优先级" clearable style="width: 120px">
          <el-option label="全部优先级" value="" />
          <el-option label="紧急" value="urgent" />
          <el-option label="高" value="high" />
          <el-option label="中" value="medium" />
          <el-option label="低" value="low" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="localFilters.status" placeholder="全部状态" clearable style="width: 120px">
          <el-option label="全部状态" value="" />
          <el-option label="待处理" value="open" />
          <el-option label="处理中" value="processing" />
          <el-option label="等待回复" value="waiting" />
          <el-option label="已解决" value="resolved" />
          <el-option label="已关闭" value="closed" />
        </el-select>
      </el-form-item>
      <el-form-item label="分配客服">
        <el-select v-model="localFilters.assignee" placeholder="全部客服" clearable style="width: 120px">
          <el-option label="全部客服" value="" />
          <el-option v-for="a in assignees" :key="a.value" :label="a.label" :value="a.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="搜索">
        <el-input v-model="localFilters.search" placeholder="工单标题或客户姓名" clearable style="width: 180px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="onClear" type="default">清除筛选</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, watch, toRefs } from 'vue'
const props = defineProps({
  filters: { type: Object, required: true },
  assignees: { type: Array, required: true }
})
const emit = defineEmits(['change'])
const localFilters = reactive({ ...props.filters })
watch(() => props.filters, (val) => {
  Object.assign(localFilters, val)
})
watch(localFilters, (val) => {
  emit('change', { ...val })
}, { deep: true })
function onClear() {
  Object.assign(localFilters, { type: '', priority: '', status: '', assignee: '', search: '' })
}
</script>

<style scoped>
.ticket-filter-bar {
  margin-bottom: 0;
  border-radius: 12px;
}
</style> 